<template>
    <div id="dailyTask">
        <div class="navbar" v-if="showBar" id="navbar">
            <div class="icon" @click="goBack">
                <i class="iconfont">&#xe72d;</i>
            </div>
            日常任务
        </div>
        <div class="banner">
            <div class="navbar" v-if="!showBar">
                <div class="icon" @click="goBack">
                    <i class="iconfont">&#xe72d;</i>
                </div>
                <div class="title">日常任务</div>
            </div>
            <div class="task-wrapper">
                <div class="task-title">
                    <i class="icon"></i>日常任务
                </div>
                <div class="task-content">
                    <p>
                        <i>①</i> 每日任务在0点重置
                    </p>
                    <p>
                        <i>②</i> 完成任务后需要点击领取获得奖励哦~
                    </p>
                </div>
            </div>
            <router-link to="/lottery" tag="div" class="show-msg">
                <div class="point-block">
                     <i class="icon"></i>
                     我的当前积分：<span>{{taskList.game_point}}</span>
                </div>
                <i class="iconfont">&#xe601;</i>
            </router-link>
        </div>
        <div class="box-content">
             <div class="list" v-for="(item,index) in taskList.data" :key='index'>
                <img :src="url+item.task_img" alt="" class="icon">
                <div class="content">
                    <div class="info">
                        <div class="desc">
                            <div class="name">
                                {{item.name}}<span>( {{item.sum}}/{{item.num}} )</span>
                            </div>
                            <p>{{item.content}}</p>
                        </div>
                        <div tag="div" class="btn" v-if="item.is_finish==0" @click="goFinish(item.condition,item.gameId)">去完成</div>
                        <div class="btn received" v-else-if="item.is_finish==1" @click="receive(item.id)">
                            领取
                        </div>
                        <div class="btn finished" v-else>
                            已完成
                        </div>
                    </div>
                    <span class="coin">
                        <i class="icon"></i>+{{item.coin_num}}
                    </span>
                </div>
            </div>
        </div>
        <div class="wait">更多任务，敬请期待~</div>
    </div>
</template>

<script>
    import {taskList,taskReceive} from 'api/game_box'
    import imgUrl from 'api/api'
    export default {
        data(){
            return{
                taskList:[],
                showBar:false
            }
        },
        created(){
            this.url=imgUrl.imgUrl;
            this.init();        
        },
        methods:{
            init(){
                let id=this.$route.query.id;
                taskList(id).then(res=>{
                    if(res.data.error==0){
                        this.taskList=res.data.content;
                    }
                })
            },
            receive(id){
                taskReceive(id).then(res=>{
                    if(res.data.error==0){
                        this.init();
                    }
                })
            },
            goBack(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            },
            handleScroll(){
              let top= document.documentElement.scrollTop||document.body.scrollTop;
              if(top>50){
                this.showBar=true;
              }else{
                 this.showBar=false;
              }
            },
            goFinish(type,id){
               let typeNum=parseInt(type);
               console.log(typeNum)
               switch (typeNum){
                   case 1:case 2:case 7:
                        this.$router.push({path:`/gameDetail/${id}`});
                        break;
                    case 3:case 4:
                        this.$router.push({path:`/gameDetail/${id}?index=1`});
                        break;
                   case 5:
                        this.$router.push({path:'/rebate'});
                        break;
                    case 8:
                        this.$router.push({path:'/redEnvelope'});
                        break;
                    case 9:
                        this.$router.push({path:'/lottery'});
                        break;
                    case 10:
                        this.$router.push({path:'/pointExchange'});
                        break;
                    case 11:
                    case 12:
                    case 13:
                    case 14:
                        this.$router.push({path:'/userMsg'});
                        break;
                    case 6:
                         window.location.href="http://h5.17byh.com/h5box/h5box.html";
                         break;
                    default:
                        break;
               }
            }
        },
        mounted () {
           window.addEventListener('scroll', this.handleScroll);
        },
        destroyed (){
            window.removeEventListener('scroll', this.handleScroll);
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable';
@import '~styles/mixins';
#dailyTask{
    #navbar{
        position: fixed;
        top:0;
        z-index:999;
        width:7.5rem;
        left:50%;
        transform: translateX(-50%);
        height:0.8rem;
        line-height:0.8rem;
        color:#fff;
        text-align: center;
        font-size:$font-size-l;
        color:#F2F2F2;
        background:#FDAC29;
        .icon{
            position:absolute;
            top:0;
            left:0;
            .iconfont{
                padding:0 0.2rem;
                font-size:0.4rem;
                color:#fff;
            }
        }
    }
    .banner{
        position:relative;
        z-index:99;
        width:7.5rem;
        height:4.26rem;
        @include bg-image('../../assets/image/dailyTask_bg');
        background-size:100% 100%;
        background-repeat: no-repeat;
        color:#fff;
        text-align: center;
        font-size:$font-size-l;
        .navbar{
            position:fixed;
            left:50%;
            top:0;
            transform: translateX(-50%);
            width:7.5rem;
            height:.8rem;
            line-height:.8rem;
            .icon{
                position:absolute;
                top:0;
                left:0.1rem;
                .iconfont{
                    padding:0 0.1rem;
                    font-size:0.4rem;
                }
            }
            .title{
                flex:1;
                text-align:center;
                font-size:$font-size-l;
            }
        }
        .task-wrapper{
            padding-top:1rem;
            text-align: left;
            .task-title{
                display: flex;
                align-items: center;
                padding-left:.2rem;
                width:2.07rem;
                height:.48rem;
                background:rgba(192,158,44,0.24);
                border-top-right-radius:.24rem;
                border-bottom-right-radius:.24rem;
                font-size:.28rem;
                font-weight: bold;
                color:#fff;
                .icon{
                    margin-right:.1rem;
                    display:inline-block;
                    width:.44rem;
                    height:.38rem;
                    @include bg-image('../../assets/image/icon_hi');
                    background-size:100% 100%;
                    background-repeat: no-repeat;
                }
            }
            .task-content{
                margin-top:.3rem;
                padding:0 .4rem;
                color:#F6F6F6;
                font-size:.26rem;
                line-height:.5rem;
                i{
                    font-size:$font-size-l;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(246,246,246,1);
                }
            }
        }
        .show-msg{
            display: flex;
            justify-content: space-between;
            padding: 0 .4rem;
            position: absolute;
            left:50%;
            bottom:0;
            transform: translateX(-50%);
            width:7rem;
            height:.91rem;
            line-height:.91rem;
            text-align: left;
            background: #fff;
            border-radius:.1rem;
            color:#333;
            font-size:$font-size-m;
            box-shadow:0px 3px 20px 0px rgba(0, 0, 0, 0.1);
            span{
                color:#F56647;
            }
            .icon{
               vertical-align: top;
               margin:.29rem .1rem 0 0;
               display:inline-block;
               width:.32rem;
               height:.32rem;
               @include bg-image('../../assets/image/icon_jf');
               background-size:100% 100%;
               background-repeat: no-repeat; 
            }
        }
    }
    .placeholder{
        width:100%;
        height:4.26rem;
    }
     .box-content{
        margin: .5rem auto 0 auto;
        width:7rem;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 20px 0px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        .list{
            position: relative;
            display:flex;
            padding:.4rem .3rem .2rem .3rem; 
            &::after{
                content:'';
                position:absolute;
                bottom:0;
                left:50%;
                transform: translateX(-50%);
                width:6.6rem;
                height:.06rem;
                background:rgba(199,199,199,1);
                opacity:0.2;
            }
            &:last-child::after{
                display:none;
            }
            .icon{
                margin-top:.05rem;
                width:.38rem;
                height:.38rem;
            }
            .content{
                flex:1;
            }
            .info{
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                padding-bottom: .2rem;
                margin-bottom: .15rem;
                margin-left: .2rem;
                border-bottom: 1px solid #f2f2f2;
                .desc{
                    flex:1;
                    .name{
                        margin-bottom:.1rem;
                        font-size:$font-size-l;
                        color:#333;
                        span{
                            margin-left:.1rem;
                            font-size:.26rem;
                            color:#999;
                        }
                    }
                    p{
                      font-size:.26rem;
                      color:#999;  
                    }
                }
            }
            .btn{
                margin-top:.05rem;
                width:1.2rem;
                height:.42rem;
                @include bg-image('../../assets/image/daily_btn');
                background-size:100% 100%;
                background-repeat: no-repeat;
                text-align: center;
                font-size:$font-size-m;
                color:#FB6848;
                &.finished{
                    color:#999;
                    @include bg-image('../../assets/image/task_finished');
                }
                &.received{
                    width:1.2rem;
                    height:.4rem;
                    line-height:.4rem;
                    text-align: center;
                    color:#fff;
                    font-size:$font-size-m;
                    background:#F56647;
                    border-radius:.2rem;
                }
            }
            .task-list{
                display:flex;
                align-items: center;
                border-bottom:1px solid #f2f2f2;
                margin-left:.2rem;
                margin-top:.25rem;
                padding-bottom:.2rem;
                &:last-child{
                    border:none;
                }
                .task-info{
                    flex:1;
                }
                .task-btn{
                    margin-top:.26rem;
                    width:1.2rem;
                    height:.42rem;
                    @include bg-image('../../assets/image/daily_btn');
                    background-size:100% 100%;
                    background-repeat: no-repeat;
                    text-align: center;
                    font-size:$font-size-m;
                    color:#FB6848;
                }
                .task-name{
                    line-height:.5rem;
                    color:#999;
                    font-size:$font-size-m;
                    span{
                        margin-left:.1rem;
                        font-size: .26rem;
                    }
                }
            }
            .coin{
                display:inline-block;
                padding:0 .1rem;
                height:.32rem;
                line-height:.32rem;
                border-radius:.15rem;
                text-align: center;
                background:rgba(251,105,73,0.25);
                color:#FA7356;
                .icon{
                    display:inline-block;
                    vertical-align: top;
                    margin-top:.03rem;
                    margin-right:.05rem;
                    width:.24rem;
                    height:.24rem;
                    @include bg-image('../../assets/image/icon_jf');
                    background-size:100% 100%;
                    background-repeat: no-repeat;
                }
            }
        }
    }
    .wait{
        margin-top:.4rem;
        padding-bottom:.4rem;
        color:#D7D7D7;
        text-align: center;
    }
}
</style>